<template>
	<div class="main">
		<div class="main-header" style="display: flex;justify-content: space-between;">
			<div style="display: flex;flex:1;flex-wrap: wrap;">
				<el-input v-model="searchParamCp.search" placeholder="请输入课程名称"
					style="width:200px;margin-right: 10px;"></el-input>
				<!-- <el-input v-model="searchParamCp.mobile" placeholder="请输入手机号" style="width:200px;margin-right: 10px;"></el-input> -->
				<el-select v-model="searchParamCp.family_status" placeholder="请选泽状态" style="width:200px;margin-left: 10px;">
					<el-option v-for="(item, index) in typeList" :key="index" :label="item.title" :value="item.id">
					</el-option>
				</el-select>
				<!-- <el-select v-model="searchParamCp.status" placeholder="请选择认证状态" style="width:200px;margin-left: 10px;">
				    <el-option v-for="(item,index) in statusList" :key="index" :label="item" :value="index">
				    </el-option>
				</el-select> -->
				<div style="width:340px;margin:0 10px;">
					<el-date-picker clearable class="ml-10" v-model="searchParamCp.time" value-format="timestamp"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="ml-10">
					<el-button type="primary" @click="searchinfo">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
			</div>
			<div style="display: flex;">
				<!-- <el-button type="primary" @click="add()">添加</el-button> -->
				<!-- <el-upload-file :showfile="false" v-model="importindex"  @click="importExcel()"
				accept=".xlsx" style="margin: 0 10px;" title="导入"></el-upload-file> -->
				<!-- <eluploadfile v-if="$auth('import')" :auto-upload="false" :upload-clear="true" :show-file-list="false" @change="upload" :limit="1" :multiple="false" accept=".xls,.xlsx" class="ml-10">
				    <el-button type="primary" >导入</el-button>
				</eluploadfile> -->
				<el-button type="primary" @click="exportExcel">导出</el-button>
				<!-- <el-button style="margin-left: 10px;"  type="danger" @click="selectdel"
					:disabled="!selection.length">批量删除</el-button> -->
			</div>
		</div>
		<el-table ref="table" class="main-table" header-align="center" border :data="list"
			@selection-change="onSelectionChange" height="100%" row-key="id" header-cell-class-name="main-table-header"
			@row-click="onRowClick">
			<el-table-column type="selection" width="50"> </el-table-column>
			<!-- <el-table-column  show-overflow-tooltip label="社区名称" prop="mass_name"></el-table-column> -->
			<!-- <el-table-column label="活动图">
				<template slot-scope="{row}">
					<el-image style="width:60px;height:60px" :src="row.img.split(',')[0]" :preview-src-list="[row.img.split(',')[0]]">
					</el-image>
				</template>
			</el-table-column> -->

			<!-- <el-table-column v-if="$route.query.type" show-overflow-tooltip label="联系方式" prop="mass_mobile" width="120px"></el-table-column> -->
			<el-table-column show-overflow-tooltip label="课程名称" prop="course_name"></el-table-column>
			<el-table-column show-overflow-tooltip label="老师名称" prop="teacher_name"></el-table-column>
			<!-- <el-table-column label="活动类型">
				<template slot-scope="{row}">
					<el-tag v-if="row.verifiy_status==0">未核销</el-tag>
					<el-tag v-if="row.verifiy_status==1" type="success">已核销</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column show-overflow-tooltip label="用户名称" prop="username"></el-table-column>
			<el-table-column show-overflow-tooltip label="用户联系电话" prop="phoneNumber"></el-table-column>
			<el-table-column show-overflow-tooltip label="家庭成员" prop="family_name"></el-table-column>
			<el-table-column show-overflow-tooltip label="家庭成员联系电话" prop="family_mobile"></el-table-column>
			<el-table-column label="开始时间" prop="start_time">
				<template slot-scope="{row}">
					{{ row.start_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column label="结束时间" prop="end_time">
				<template slot-scope="{row}">
					{{ row.end_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column label="审核状态">
				<!-- 状态0待支付1已支付2已核销3已退款4已取消5已评价/已完成-->
				<template slot-scope="{row}">
					<el-tag v-if="row.family_status == 0">待支付</el-tag>
					<el-tag v-if="row.family_status == 1" type="success">待核销</el-tag>
					<el-tag v-if="row.family_status == 2" type="warning">已核销</el-tag>
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作" width="200px">
				<template slot-scope="{row}">
					<el-button type="primary" @click.stop="add(row)">编辑</el-button>
					<el-button type="warning" @click.stop="tosign(row)">报名详情</el-button>
					<el-button v-if="row.status==0" type="primary" @click.stop="examine(row)">审核</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="searchParam.page" :page-size="searchParam.limit"
			:total="searchParam.total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next">
		</el-pagination>
		<!-- <el-dialog :title="title" :key="formDataStatus" :visible.sync="centerDialogVisible" @close="onDialogClose"
			width="60%">
			<add @close="close" :formData="userinfo" @search="addcommunity"></add>
		</el-dialog> -->
	</div>
</template>
<script>
// import companyCate from '@/components/company-cate.vue'
// import supervisorSelect from '@/components/supervisor-select.vue'auth
// import add from './components/add.vue'
import { imghttp, get, post, del } from '@/assets/js/http'
// import eluploadfile from '../../components/el-upload-file.vue'
export default {
	// components: { add },
	data() {
		return {
			list: [],
			selection: [],
			addShow: false, //添加显示
			centerDialogVisible: false, //详情弹窗
			title: '', //弹窗标题
			userinfo: {}, //用户信息
			typeList: [{
				id: 1,
				title: '待核销'
			}, {
				id: 2,
				title: '已核销'
			}],  //状态0待支付1已支付2已核销3已退款4已取消5已评价/已完成
			statusList: ['未认证', '认证待审核', '认证通过', '认证驳回'], //认证状态 0未认证 1认证待审核 2认证通过 3认证驳回
			searchParam: {
				page: 1,
				limit: 20,
				total: 0,
				cadre_id: '',
				time: [],
				status: '',
				family_status: '',
				keyword: '',
				search: '',
				mobile: '',
			},
			searchParamCp: {
				status: '',
			},
			formDataStatus: false,
			imgs: []
		}
	},
	created() {
		Object.assign(this.searchParam, this.$route.query ? this.$route.query : {})
		Object.assign(this.searchParamCp, this.$route.query ? this.$route.query : {})
		this.getList()
	},
	watch: {
		'$route': {
			deep: true,
			handler() {
				this.reset()
			}
		},
	},
	methods: {
		//获取社区列表
		async getList() {
			this.$loading()
			// let { list,total } = 
			await get({
				url: '/admin/project.Course/course_family_order',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						hx_time: this.searchParam.time.length ? this.searchParam.time.map(item => item / 1000) : ''
					}
				},

			}).then(res => {
				this.list = res.list
				console.log(res.list)
				this.searchParam.total = res.total
				this.importindex = []
				this.$loading().close()
			})
		},
		//跳报名详情
		tosign(row) {
			// this.$router.push()
			this.$router.push({ path: '/activitysign', query: { activity_id: row.id } })
		},
		//添加/编辑弹窗
		add(row) {
			if (row) { //编辑
				this.centerDialogVisible = true
				this.title = "编辑活动"
				get({
					url: '/admin/project.Activity/edit',
					params: {
						id: row.id
					}
				}).then(res => {
					// this.userinfo = res.row
					//  this.userinfo.time = [this.userinfo.start_time*1000,this.userinfo.end_time*1000]
					// this.userinfo.img = [{
					// 	name: res.row.img,
					// 	url: res.row.img,
					// }]
					const form = JSON.parse(JSON.stringify(res.row))
					let imgs = []
					form.img = form.img.split(',')
					form.img.forEach(item => {
						imgs.push({ name: item, url: item })
					})
					form.img = imgs
					form.location = { lat: form.latitude, lng: form.longitude }
					form.time = [form.start_time * 1000, form.end_time * 1000]
					this.userinfo = form
					console.log(this.userinfo, 'this.userinfo.img', this.userinfo.location, form.location)
				})

			} else { //添加
				this.userinfo = {}
				this.centerDialogVisible = true
				this.title = "添加活动"
			}
			this.formDataStatus = true;
		},
		//审核
		examine(row) {
			this.$confirm('是否通过该申请?', '提示', {
				confirmButtonText: '通过',
				cancelButtonText: '拒绝',
				type: 'warning'
			}).then(() => {
				post({
					url: '/admin/project.Activity/apply_status',
					data: {
						id: row.id,
						status: 1,//1通过2拒绝
					},
					successTip: true,
				}).then(res => {
					this.getList()
				})
			}).catch(action => {
				if (action === 'cancel') {
					post({
						url: '/admin/project.Activity/apply_status',
						data: {
							id: row.id,
							status: 2,//1通过2拒绝
						},
						successTip: true,
					}).then(res => {
						this.getList()
						// this.$message({
						// 	type: 'info',
						// 	message: '已取消删除'
						// });  
					})
				}
				else {

				}

			});
		},
		//添加课程
		addcommunity(result) {
			const info = JSON.parse(JSON.stringify(result))
			console.log(result)
			this.imgs = []
			info.img.forEach(item => {
				this.imgs.push(item.url)
			})
			info.img = this.imgs.join(',')
			// info.desc = ''
			console.log(info, info.img, this.imgs)
			// return
			if (info.id) {
				post({
					url: '/admin/project.Activity/edit',
					data: info,
					successTip: true,
				}).then(res => {
					this.close()
					this.getList()
				})
			} else {
				post({
					url: '/admin/project.Activity/add',
					data: info,
					successTip: true,
				}).then(res => {
					this.close()
					this.getList()
				})
			}
		},
		//关闭弹窗
		close() {
			this.centerDialogVisible = false
		},
		reset() {
			this.searchParamCp = this.$options.data().searchParam
			this.searchParam = this.$options.data().searchParam
			this.getList()
		},
		searchinfo() {
			this.searchParam.page = 1
			console.log(this.searchParam.time, 'this.searchParam.time')
			this.searchParam = {
				...this.searchParam,
				...this.searchParamCp
			}
			this.getList()
		},
		onCurrentChange() {
			this.getList()
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row);
		},
		onSelectionChange(selection) {
			this.selection = selection;
		},
		selectdel() {
			this.$confirm(
				`此操作将永久删除该${this.selection.length}个活动, 是否继续?`,
				"提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}
			)
				.then(async () => {
					let query = "?";
					for (let i = 0; i < this.selection.length; i++) {
						const item = this.selection[i];
						if (i > 0) {
							query += "&ids[]=" + item.id;
						} else {
							query += "ids[]=" + item.id;
						}
					}
					await del({
						url: "/admin/project.Activity/del" + query,
						successTip: true,
						loading: true
					});
					this.getList()
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: '/api/Realmerit/course_hx_export',
				params: {
					...this.searchParam,
					...{
						hx_time: this.searchParam.time && this.searchParam.time
							.length ? this.searchParam.time.map(item => item / 1000) : ''
					}
				}
			})
			let a = document.createElement('a');
			var url = URL.createObjectURL(res);
			a.href = url;
			a.click();
			this.$loading().close()
		},
		//导入
		async upload({
			raw
		}) {
			this.$loading({
				text: '导入中 请等待...'
			})
			console.log(raw)
			await imghttp({
				url: '/admin/basic.Masses/import',
				data: {
					file: raw
				},
				successTip: true
			})
			this.getList()
			this.$loading().close()
		},
		onDialogClose() {

		},

	}
}
</script>

<style>
.el-date-editor .el-range-separator {
	padding: 0;
}
</style>
